<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>错题集 - 系统架构师考试备考助手</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/wrong-questions.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <header class="sub-header">
            <a href="index.html" class="back-btn">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1>错题集</h1>
            <div class="header-action">
                <i class="fas fa-filter"></i>
            </div>
        </header>

        <!-- 错题统计 -->
        <section class="wrong-stats">
            <div class="stat-card">
                <div class="stat-value">128</div>
                <div class="stat-label">累计错题</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">85</div>
                <div class="stat-label">已掌握</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">43</div>
                <div class="stat-label">待复习</div>
            </div>
        </section>

        <!-- 错题分类 -->
        <div class="wrong-categories">
            <div class="wrong-category active">全部</div>
            <div class="wrong-category">基础知识</div>
            <div class="wrong-category">架构设计</div>
            <div class="wrong-category">项目管理</div>
            <div class="wrong-category">案例分析</div>
        </div>

        <!-- 错题列表 -->
        <section class="wrong-list">
            <div class="wrong-card">
                <div class="question-header">
                    <div class="question-type">单选题</div>
                    <div class="question-date">2023-03-15</div>
                </div>
                <div class="question-content">
                    <p class="wrong-question">在软件架构设计中，以下哪种模式最适合处理对象状态变化的场景？</p>
                    <div class="wrong-options">
                        <div class="option">A. 工厂模式</div>
                        <div class="option">B. 观察者模式</div>
                        <div class="option selected wrong">C. 状态模式 <i class="fas fa-times"></i></div>
                        <div class="option correct">D. 适配器模式 <i class="fas fa-check"></i></div>
                    </div>
                </div>
                <div class="wrong-actions">
                    <button class="explanation-btn">查看解析</button>
                    <button class="mastery-btn">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                    </button>
                </div>
                <div class="wrong-explanation hidden">
                    <h4>解析</h4>
                    <p>状态模式允许对象在内部状态改变时改变它的行为。这种模式将状态封装成独立的类，并将请求委托给当前的状态对象，从而使得对象的行为随着内部状态的改变而改变。</p>
                    <p>适配器模式用于将一个类的接口转换成客户希望的另外一个接口，使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。</p>
                </div>
            </div>

            <div class="wrong-card">
                <div class="question-header">
                    <div class="question-type">多选题</div>
                    <div class="question-date">2023-03-12</div>
                </div>
                <div class="question-content">
                    <p class="wrong-question">以下哪些是微服务架构的特点？</p>
                    <div class="wrong-options">
                        <div class="option selected correct">A. 服务独立部署 <i class="fas fa-check"></i></div>
                        <div class="option selected correct">B. 服务间通过轻量级协议通信 <i class="fas fa-check"></i></div>
                        <div class="option selected wrong">C. 共享数据库 <i class="fas fa-times"></i></div>
                        <div class="option correct">D. 服务自治 <i class="fas fa-check"></i></div>
                        <div class="option">E. 集中式配置管理</div>
                    </div>
                </div>
                <div class="wrong-actions">
                    <button class="explanation-btn">查看解析</button>
                    <button class="mastery-btn">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                    </button>
                </div>
                <div class="wrong-explanation hidden">
                    <h4>解析</h4>
                    <p>微服务架构的核心特点包括服务独立部署、服务间通过轻量级协议通信、服务自治等。而"共享数据库"违背了微服务的数据隔离原则，每个微服务应该有自己的数据存储。"集中式配置管理"不是微服务的必要特点，微服务可以有分布式的配置管理。</p>
                </div>
            </div>

            <div class="wrong-card">
                <div class="question-header">
                    <div class="question-type">判断题</div>
                    <div class="question-date">2023-03-10</div>
                </div>
                <div class="question-content">
                    <p class="wrong-question">在分布式系统中，CAP理论指的是一致性、可用性和分区容错性三者可以同时满足。</p>
                    <div class="wrong-options">
                        <div class="option selected wrong">A. 正确 <i class="fas fa-times"></i></div>
                        <div class="option correct">B. 错误 <i class="fas fa-check"></i></div>
                    </div>
                </div>
                <div class="wrong-actions">
                    <button class="explanation-btn">查看解析</button>
                    <button class="mastery-btn">
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                    </button>
                </div>
                <div class="wrong-explanation hidden">
                    <h4>解析</h4>
                    <p>CAP理论指的是在分布式系统中，一致性(Consistency)、可用性(Availability)和分区容错性(Partition tolerance)三者不可兼得，最多只能同时满足其中两项。</p>
                </div>
            </div>
        </section>

        <!-- 智能推荐 -->
        <section class="recommendations">
            <h2 class="section-title">智能推荐</h2>
            <div class="recommendation-card">
                <div class="recommendation-header">
                    <h3>针对性练习</h3>
                    <span class="recommendation-count">15题</span>
                </div>
                <p class="recommendation-desc">根据您的错题情况，系统智能推荐以下专题练习，帮助您巩固薄弱环节。</p>
                <div class="recommendation-tags">
                    <div class="tag">分布式系统</div>
                    <div class="tag">设计模式</div>
                    <div class="tag">微服务架构</div>
                </div>
                <button class="start-practice-btn">开始练习</button>
            </div>
        </section>

        <!-- 底部导航 -->
        <nav class="bottom-nav">
            <a href="index.html">
                <i class="fas fa-home"></i>
                <span>学习</span>
            </a>
            <a href="profile.html">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </a>
        </nav>
    </div>

    <script src="js/wrong.js"></script>
</body>
</html> 